<!--订单详情-->
<template>
	<div>	
		<van-popup
		  v-model="showEvaluatePopup"
		  position="right"
		  :overlay="false"
		  :style="{ height: '100%',width:'100%' }"
		> 		
		<div class="html_a">
			<div class="header">
				<van-nav-bar
				  title="查看评价"
				  left-arrow
				  :border="false"
				>	
				  <van-icon name="arrow-left" slot="left" color="#000" size="20" @click="showEvaluatePopup=false"/>
			    </van-nav-bar>	
		    </div>
		    
		    
		    <div class="body">
		    	
			    <div style="display: flex;align-items: center;justify-content: center;padding: 20px 0;" v-if="!hasFirst">
			    	<img src="../../../../static/img/lanhu/92.png" alt="" style="width: 30%;"/>
			    </div>
		        
		        <div class="b" v-if="hasFirst">
		        	<div class="b1">
		        		<img :src="info.savatar" alt="" />
		        	</div>
		        	
		        	<div class="b2">
		        		<div class="c1">
		        			<div class="d1">{{info.nickName}}</div>
		        			<div class="d2">{{info.commentTxt}}</div>
		        			<div class="d6" v-if="info.commentImage">
		        				<img :src="section" alt="" @click="row(section)" v-for="section in formatImg(info.commentImage)"/>
		        			</div>			        			
		        			<div class="d4">{{info.commentAddtime}}</div>
		        			<div class="d5">
		        				<div class="e1"><img :src="info.goodsImage" alt="" /></div>
		        				<div class="e2">
		        					<div class="f1">{{info.comName}}</div>
		        					<div class="f2">交易成功时间 {{info.ordersFinishTime}}</div>
		        				</div>
		        			</div>
		        		</div>
		        		<div class="c2" v-if="info.commentIsgood>0">
		        			<span class="d3">
		        				<img src="" alt="" />
		        			</span>
		        		</div>
		        	</div>
		        	
		        </div>
		
				
				<div class="interval"></div>
	
				<div class="h">
					<div class="i">
						<span class="i1"></span>
						<span class="i2">追评 * {{list.length}}</span>
					</div>
					<div class="j">
						<div class="item" v-for="item in list">
				        	<div class="b1">
				        		<img :src="item.avatar" alt="" />
				        	</div>
				        	
				        	<div class="b2">
				        		<div class="c1">
				        			<div class="d1">{{item.nickName}}</div>
				        			<div class="d2">{{item.commentTxt}}</div>
				        			<div class="d6" v-if="item.commentImage">
				        				<img :src="section" alt="" @click="row(section)" v-for="section in formatImg(item.commentImage)"/>
				        			</div>				        			
				        			<div class="d4">{{item.commentAddtime}}</div>
				        		</div>
				        		<div class="c2" v-if="item.commentIsgood>0">
				        			<span class="d3">
				        				<img src="../../../../static/img/lanhu/66.png" alt="" style="width: 16px;"/>
				        			</span>
				        		</div>
				        	</div>					
						</div>			
					</div>
				</div>							  
	   
		    </div>

		    <div class="html_foot" v-if="ordersState!=13">
				<div class="k" style="padding: 10px 0;">
					<div class="k1">
						<van-button color="#ffda44" block  @click="append">追加评价</van-button>
					</div>
				</div>			    	
		    </div>

		</div>

		</van-popup>
		<floor57 ref="floor57" @reload='reload'></floor57>
        <rowimg ref="rowImg"></rowimg>
	</div>	
</template>

<script>
import rowimg from '_c/rowImg.vue'		
import floor57 from '_c/market/floor/floor57.vue'
import {getFun,getTimer} from '@/api/publicFun.js'	 
let publicFun=getFun()		
export default {
	name: 'lookEvaluate',	
	data() {
       return {
          ordersId:'',
          userId:'',
          goodsId:'',
          url1:this.$api+'/marketorderservice/api/v1/market/commentInfo',
          url2:this.$api+'/marketorderservice/api/v1/market/listComment',
          info:{},
          list:[],
          showEvaluatePopup:false,
          hasFirst:false,
          ordersState:''
       }
	},
	components: {
       floor57,rowimg
	},		
	methods: {	
	  row(section){
	  	this.$refs.rowImg.showWin(section)
	  },
	  showWin(item){
	  	this.ordersState=item.ordersState
	  	this.showEvaluatePopup=true
	  	this.ordersId=item.ordersId
	  	this.goodsId=item.goodsId
		this.getData1()
		this.getData2()	  	
	  },
      append(){
      	 this.$refs.floor57.showWin(this.ordersId,this.goodsId)
      },
      reload(){
      	this.getData2()	 
      },
      formatImg(str){
      	return str.split(',')
      },
      // 加载第一条数据
      getData1(){      	
      	let params1={
      		ordersId:this.ordersId,
      		userId:this.userId
      	}
      	let that=this
	    this.$Axios.Post(this.url1,params1)
	      .then(function(res) {
	      	
	      	if(res.commentInfo){
	      	  that.hasFirst=true
	      	  that.info=res.commentInfo 
	      	}else{
	      	  that.hasFirst=false	
	      	}           
	    }) 	      	
      },
      // 加载列表
      getData2(){      	
      	let params1={
      		ordersId:this.ordersId,
      		userId:this.userId
      	}
      	let that=this
	    this.$Axios.Post(this.url2,params1)
	      .then(function(res) {
	      	console.log(res)
            that.list=res.list
	    }) 	      	
      }      
	},
	mixins:[publicFun],//混入		
	mounted() {
		this.userId=this.$router.currentRoute.query.userId;	
		
	}
}	
</script>

<style scoped="" lang="scss">
*{box-sizing: border-box;}
.html_a{display: flex;flex-direction: column;height: 100%;
   .header{}
   .body{flex: 1;overflow: scroll;}
   .html_foot{padding: 0 10px;}

}
.b{padding: 10px 15px;display: flex;}
.b1 img{width: 24px;height: 24px;display: block;border-radius: 4px;}
.b2{margin-left: 10px;display: flex;justify-content: space-between;flex: 1;.c1{width: 100%;}}
.d1{color: #aaa;}
.d2{margin: 8px 0;font-size: 16px;width: 100%;word-break: break-all;display: -webkit-box;}
.d4{color: #aaa;margin-bottom: 8px;}
.d5{padding:10px;background: #f4f5f9;display: flex;align-items: center;}
.d5 img{width: 50px;height: 50px;display: block;border-radius: 4px;}
.e2{margin-left: 10px;}
.f1{margin-bottom: 8px;}
.f2{color: #aaa;}
.interval{background: #edeef3;height: 10px;}
.h{padding: 10px 15px 20px;}
.i{font-size: 16px;display: flex;}
.i1{width: 4px;display: block;margin-top: 3px;
height: 16px;background: #ffda44;margin-right: 8px;border-radius: 6px;}
.j{padding: 20px 0;}
.j .item{display: flex;margin-bottom: 10px;}

.d6{display: flex;margin-bottom: 8px;}
.d6 img{display: block;width: 40px;height: 40px;border-radius: 4px;margin-right: 4px;}


.van-button__text{color: #000;font-size: 16px;}
</style>